<template>
  <view class="big3" v-if="!resShow">
    <view class="tableA">
      <nut-cell title="发货地" :desc="addressFilter(props.mainState.timeSendAddress) || '请选择发货地'"
        @click="showPop" is-link>
        <template v-slot:icon>
          <view class="sendImg"></view>
        </template>
      </nut-cell>

      <nut-cell title="收货地" :desc="addressFilter(props.mainState.timeGetAddress) || '请选择收货地'"
        @click="showPop2" is-link>
        <template v-slot:icon>
          <view class="getImg"></view>
        </template>
      </nut-cell>
    </view>
    <nut-button color="#0966FF" size="large" type="primary" @click="inquire()" class="searchbtn">查&nbsp;&nbsp;询</nut-button>
    <p class="bottomP">说明：价格时效仅供参考，具体以实际为准</p>
  </view>
  <view v-else>
    <view class="resBox1" v-if="resData.data && resData.data[0]">
      <view class="resItem resBoxTop">普件</view>
      <view class="resItem bottomBorder">
        <view style="display: flex">
          <image src="../../../assets/images/index/服务查询/shixiaojiage_icon_lifnagmi.png" alt="" />
          <p>每立方米运价</p>
        </view>
        <view class="price">￥&nbsp;&nbsp;{{ resData.data[0].BASEVOLUMEPRICE }}</view>
      </view>
      <view class="resItem bottomBorder">
        <view style="display: flex">
          <image src="../../../assets/images/index/服务查询/shixiaojiage_icon_gongjin.png" alt="" />
          <p>每公斤运价</p>
        </view>
        <view class="price">￥&nbsp;&nbsp;{{ resData.data[0].BASEWEIGHTPRICE }}</view>
      </view>
      <view class="resItem bottomBorder">
        <view style="display: flex">
          <image src="../../../assets/images/index/服务查询/shixiaojiage_icon_zuidiyunjia.png" alt="" />
          <p>最低运价</p>
        </view>
        <view class="price">￥&nbsp;&nbsp;{{ resData.data[0].STARTPRICE }}</view>
      </view>
      <view class="resItem">
        <view style="display: flex">
          <image src="../../../assets/images/index/服务查询/shixiaojiage_icon_shixiaomiaoshu.png" alt="" />
          <p>时效描述</p>
        </view>
        <view class="price">{{ resData.data[0].PICKUPINFO }}</view>
      </view>
    </view>
    <view class="resBox2" v-if="quickData.data && quickData.data[0]">
      <view class="resItem resBoxTop">普件</view>
      <view class="resItem bottomBorder">
        <view style="display: flex">
          <image src="../../../assets/images/index/服务查询/shixiaojiage_icon_lifangmi2.png" alt="" />
          <p>每立方米运价</p>
        </view>
        <view class="price">￥&nbsp;&nbsp;{{ quickData.data[0].BASEVOLUMEPRICE }}</view>
      </view>
      <view class="resItem bottomBorder">
        <view style="display: flex">
          <image src="../../../assets/images/index/服务查询/shixiaojiage_icon_gongjin2.png" alt="" />
          <p>每公斤运价</p>
        </view>
        <view class="price">￥&nbsp;&nbsp;{{ quickData.data[0].BASEWEIGHTPRICE }}</view>
      </view>
      <view class="resItem bottomBorder">
        <view style="display: flex">
          <image src="../../../assets/images/index/服务查询/shixiaojiage_icon_zuidiyunjia-2.png" alt="" />
          <p>最低运价</p>
        </view>
        <view class="price">￥&nbsp;&nbsp;{{ quickData.data[0].STARTPRICE }}</view>
      </view>
      <view class="resItem">
        <view style="display: flex">
          <image src="../../../assets/images/index/服务查询/shixiaojiage_icon_shixiaomiaoshu-2.png" alt="" />
          <p>时效描述</p>
        </view>
        <view class="price">{{ quickData.data[0].PICKUPINFO }}</view>
      </view>
    </view>
    <view class="bottomBox">
      <nut-button style="margin-top: 16px" color="#0966FF" size="large" type="primary"
        @click="resShow = false">重新查询</nut-button>
      <p class="bottomP">说明：价格时效仅供参考，具体以实际为准</p>
    </view>
  </view>
</template>
<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { $post } from "@/@api/index";
import { onMounted, ref, reactive, watch } from "vue";
import { priceAndTime } from "@/@api/order";
export interface timeAddressList {
  code: string;
  children?: timeAddressList[];
  id: number;
  name: string;
}
const props = defineProps<{
  mainState: {
    timeSendAddress: Array<string>;
    timeGetAddress: Array<string>;
  };
  mainShow: {
    show: boolean,
  };
  mainShow2: {
    show: boolean,
  };
}>();
const showPop = () => {
  props.mainShow.show = true
}
const showPop2 = () => {
  props.mainShow2.show = true
}
const resShow = ref(false);
const resData = ref(); //所有查询返回数据
const quickData = ref(); //普件数据

const emit = defineEmits<{
  (e: "errMsg", errMsg: string);
}>();
//地址回显过滤
function addressFilter(add: Array<string>) {

  let aa = "";
  for (let i = 0; i < add.length; i++) {
    if (i !== add.length - 1) {
      aa += add[i] + "-";
    } else {
      aa += add[i];
    }
  }
  return aa;
}
//查询按钮
async function inquire() {
  if (!props.mainState.timeSendAddress.length) {
    emit("errMsg", "请选择发货地");

    return;
  }
  if (!props.mainState.timeGetAddress.length) {
    emit("errMsg", "请选择收货地");

    return;
  }
  let sendA = props.mainState.timeSendAddress.toString().replace(/,/g, " ");
  let getA = props.mainState.timeGetAddress.toString().replace(/,/g, " ");

  const res = await priceAndTime({
    strarea: sendA,
    desarea: getA,
    type: '普件'
  })

  const res1 = await priceAndTime({
    strarea: sendA,
    desarea: getA,
    type: '快件'
  })
  console.log(res,res1, "res");
  if (JSON.parse(res.data.data).code == 1) {
    emit("errMsg", JSON.parse(res.data.data).message);

    return;
  } else {
    resData.value = JSON.parse(res.data.data)
    quickData.value = JSON.parse(res1.data.data)
    console.log(resData.value,quickData.value,171);

    resShow.value = true;
  }
  // if (res.data.resKJ.message && res.data.resPJ.message) {
  //   emit("errMsg", "未配置当前线路的基础运价！");

  //   return;
  // } else {
  //   resData.value = res.data;

  //   if (res.data.resKJ.message) {
  //     resData.value.resKJ = [];
  //   }
  //   if (res.data.resPJ.message) {
  //     resData.value.resPJ = [];
  //   }
  //   resShow.value = true;
  // }
}

</script>
<style lang="less">
.big3 {
  height: calc(89vh);
  width: 100%;
}

.tableA {
  border-radius: 16rpx;
  //   height: 200rpx;
  background: white;
}

.sendImg {
  height: 40rpx;
  width: 40rpx;
  background: url("../../../assets/images/index/服务查询/shixiaojiage_icon_fahuodi.png") no-repeat;
}

.getImg {
  height: 40rpx;
  width: 40rpx;
  background: url("../../../assets/images/index/服务查询/shixiaojiage_icon_shouhuodi.png") no-repeat;
}

.countBox {
  border: 1rpx solid #c4c4c4;
  border-radius: 8rpx;
  display: flex;
}

.bottomP {
  font-family: PingFangSC-Regular;
  font-size: 24rpx;
  font-weight: normal;
  line-height: 32rpx;
  /* 文字色/灰3 */
  color: #999999;
  text-align: center;
  margin-top: 28rpx;
}

.resBox1 {
  border-radius: 16rpx;
  background: white;

  .bottomBorder {
    box-sizing: border-box;
    border-bottom: 2rpx solid rgb(214, 214, 214);
  }

  .resItem {
    height: 104rpx;
    padding: 28rpx 24rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .price {
      font-size: 28rpx;
      font-weight: 600;
    }

    p {
      font-size: 28rpx;
      color: #666666;
      margin-left: 12rpx;
    }

    image {
      height: 40rpx;
      width: 40rpx;
    }
  }

  .resBoxTop {
    color: #0966ff;
    background: url("../../../assets/images/index/服务查询/shixiaojiage_img_pujian.png") no-repeat;
    font-size: 32rpx;
    font-weight: 600;
  }
}

.resBox2 {
  border-radius: 16rpx;
  background: white;

  .bottomBorder {
    box-sizing: border-box;
    border-bottom: 2rpx solid rgb(214, 214, 214);
  }

  .resItem {
    height: 104rpx;
    padding: 28rpx 24rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .price {
      font-size: 28rpx;
      font-weight: 600;
    }

    p {
      font-size: 28rpx;
      color: #666666;
      margin-left: 12rpx;
    }

    image {
      height: 40rpx;
      width: 40rpx;
    }
  }

  .resBoxTop {
    color: #ff330a;
    background: url("../../../assets/images/index/服务查询/shixiaojiage_img_kuaijian.png") no-repeat;
    font-size: 32rpx;
    font-weight: 600;
  }
}

.bottomBox {
  width: 100%;
}
.searchbtn {
  margin-top: 24rpx;
}
</style>
